
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <title>Highcharts Example</title>
            
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <style type="text/css">
                #container, #sliders {
                    min-width: 310px;
                    max-width: 800px;
                    margin: 0 auto;
                }
            #container {
                height: 400px;
            }
            </style>
            
            <script type="text/javascript">
                function requestData(){
                    document.location = "js://zqx?type=zonghe";
                }
            </script>
            
            
            
            <script type="text/javascript">
                function receiveData (data,xArray) {
                    // Set up the chart
                    var chart = new Highcharts.Chart({
                                                     chart: {
                                                     renderTo: 'container',
                                                     type: 'column',
                                                     options3d: {
                                                     enabled: true,
                                                     alpha: 15,
                                                     beta: 15,
                                                     depth: 50,
                                                     viewDistance: 25
                                                     }
                                                     },
                                                     title: {
                                                     text: 'Chart rotation demo'
                                                     },
                                                     subtitle: {
                                                     text: 'Test options by dragging the sliders below'
                                                     },
                                                     xAxis: {
                                                     categories: [
                                                                  '集散',
                                                                  '包车',
                                                                  '出租车',
                                                                  '公交车',
                                                                  ],
                                                     plotBands: [{ // visualize the weekend
                                                                 from: 4.5,
                                                                 to: 6.5,
                                                                 color: 'rgba(68, 170, 213, .2)'
                                                                 }]
                                                     },
                                                     plotOptions: {
                                                     column: {
                                                     depth: 25
                                                     }
                                                     },
                                                     series: data
                                                     });
                                                     
                                                     function showValues() {
                                                         $('#alpha-value').html(chart.options.chart.options3d.alpha);
                                                         $('#beta-value').html(chart.options.chart.options3d.beta);
                                                         $('#depth-value').html(chart.options.chart.options3d.depth);
                                                     }
                                                     
                                                     // Activate the sliders
                                                     $('#sliders input').on('input change', function () {
                                                                            chart.options.chart.options3d[this.id] = this.value;
                                                                            showValues();
                                                                            chart.redraw(false);
                                                                            });
                                                                            
                                                                            showValues();
                }
            </script>
            </head>
    <body onload="requestData()">
        <script src="js/highcharts.js"></script>
        <script src="js/highcharts-3d.js"></script>
        <script src="js/exporting.js"></script>
        
        <div id="container"></div>
        <div id="sliders">
            <table>
                <tr>
                    <td>Alpha Angle</td>
                    <td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>Beta Angle</td>
                    <td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
                </tr>
                <tr>
                    <td>Depth</td>
                    <td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
                </tr>
            </table>
        </div>
    </body>
</html>
